<template>
  <div class="buttonCom">
    <template v-if="item.btnGroups">
      <template v-if="item.btnGroups === 'plusMinus'">
        <el-button
          type="success"
          icon="el-icon-plus"
          @click="
            () => {
              buttonFuc(item, 'plus');
            }
          "
        >
        </el-button>
        <el-button
          type="danger"
          :class="item.class"
          icon="el-icon-minus"
          @click="
            () => {
              buttonFuc(item, 'minus');
            }
          "
        >
        </el-button>
      </template>
    </template>
    <template v-else>
      <el-button
        v-if="item.show"
        :type="item.btnType || 'default'"
        :class="item.class"
        :icon="item.icon"
        :plain="item.plain"
        @click="
          () => {
            buttonFuc(item);
          }
        "
        :accesskey="item.accesskey"
      >
        {{ item.label }}
      </el-button>
    </template>
  </div>
</template>

<script>
export default {
  name: "buttonCom",
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    itemIndex: {
      type: Number,
      default: () => {
        return null;
      }
    }
  },
  methods: {
    buttonFuc(item, type) {
      item.func({ index: this.itemIndex, formData: this.formData, type: type });
    }
  }
};
</script>

<style scoped lang="scss">
.buttonCom {
  height: 55px;
  padding: 3px 1px 0 1px;
}

.el-button {
  //height: 32px;
}
</style>
